<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <meta content="telephone=no" name="format-detection" />
        <title>修改分成比例</title>
        <link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
    </head>
    <style type="text/css">
        body{
            background-color: #F1F1F1;
        }
        input{
            border: none;
            outline: none;
        }
        .mine{
            box-sizing: border-box;
            padding: 0.8rem 1rem;
            overflow: hidden;
            margin-bottom: 10px;
            background-color: #FFFFFF;
        }
        .mine-left{
            float: left;
        }
        .mine-right{
            float: right;
            color: #D74B2D;
        }
        .mine-icon{
            float: left;
            height: 1rem;
            margin-right: 5px;
        }
        .inp-wrap{
            background-color: #FFFFFF;
            margin: 25px 0;
        }
        .inp{
            width: 80%;
            padding: 15px 0;
            margin-left: 15px;
            font-size: 1.1rem;
        }
        .btn-big{
            text-align: center;
            background-color: #D9543B;
            border-radius: 5px;
            font-size: 1.1rem;
            padding: 0.7rem 0;
            color: #F9EAE7;
            width: 90%;
            margin: 0 auto;
        }
    </style>
    <body>
        <form method="POST" action="">
            {{csrf_field()}}
            <div class="mine">
                <img class="mine-icon" src="{{asset('/imgs/fencheng.png')}}"/>
                <div class="mine-left">当前分成比例</div>
                <div class="mine-right">{{$agent->divide}}%</div>
            </div>
            <div class="inp-wrap">
                <input class="inp" type="number" name="divide" id="fcNum" placeholder="请输入新分成比例" /><br>
                <span style="font-size:16px;color:#ccc;text-align:center">&nbsp;&nbsp;&nbsp;&nbsp;当前设置比例为<span style="font-size:18px;color:red" class="input-divide">{{$agent->divide}}%</span><br>&nbsp;&nbsp;&nbsp;&nbsp;下级购买一张银票(房卡)他的分成是<span class="divide-money" style="font-size:18px;color:red">{{0.5 * ($my->divide/100) * ($agent->divide/100)}}元</span> </span>
            </div>
            <div class="btn-big" id="go">设置</div>
        </form>    
    <script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript">
        $('#go').click(function() {
            var num = $('#fcNum').val()
            if (!num) {
                alert('请输入分成比例');
            } else {
                if (!isInteger(num)) {
                    alert('分成比例错误');
                } else {
                    $(this).parents('form').submit();
                }
            }
        })

        function isInteger(obj) {
            return obj%1 === 0;
        }
        $('#fcNum').on('input propertychange',function(){
            var val = $(this).val();
            if (isRealNum(val)) {
                var my_divide = "{{$my->divide}}";
                var money = 0.5 * (my_divide / 100) * (val / 100);
            　　$('.input-divide').html(val+'%');
            　　$('.divide-money').html(money+'元');
            }
        });

        function isRealNum(val){
            // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
            if(val === "" || val ==null){
                return false;
            }
            if(!isNaN(val)){
                return true;
            }else{
                return false;
            }
        }   
    </script>
    </body>
</html>
